<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Event Handling</title>
	<script type="text/javascript">
		var eventCtrl = {
				add: function(elem, eventType, handler) {
					eventType = eventType.replace('on', '');
					if (elem.addEventListener) {
						elem.addEventListener(eventType, handler, false);
					} else if (elem.attachEvent) {
						eventType = 'on' + eventType;
						elem.attachEvent(eventType, handler);
					}
				},
				remove: function(elem, eventType, handler){
					eventType = eventType.replace('on', '');
					if (elem.removeEventListener) {
						elem.removeEventListener(eventType, handler);
					} else if (elem.detachEvent) {
						eventType = 'on' + eventType;
						elem.detachEvent(eventType, handler);
					}
				},
				/**
				 * 이벤트 취소시키는 메서드
				 */
				cancel: function(event) {
					// ie 8 이하 버전에서 이벤트 취소하기
					event.returnValue = false;
					if (event.preventDefault) {
						// ie 8 이하 버전은 event.preventDefault가 지원되지 않음
						event.preventDefault();
					}
				},
				keyEvents: {
					/**
					 * 엘리먼트의 키보드 이벤트를 탐지해 숫자를 이벤트 발생위치가
					 * 숫자버튼에서 발생했을 때만 이벤트를 통과 시킵니다.
					 */
					onlyNumber: function(event) {
						var keyCode = event.keyCode || event.which;
						
						document.getElementById('insertedKeyCode').innerHTML = keyCode;
						
						if(keyCode < 48 || keyCode > 57) {
							eventCtrl.cancel(event);
						}
					}
				}
		};
		eventCtrl.add(window, 'load', function() {
			// numberInput 엘리먼트에서 키다운 이벤트가 발생하면
			// insertedKeyCode 엘리먼트에 이벤트 키코드를 보여주도록 합니다.
			var numberInput = document.getElementById('numberInput');
			eventCtrl.add(numberInput, 'keydown', function(event){
				var keyCode = event.keyCode || event.which;
				document.getElementById('insertedKeyCode').innerHTML = keyCode;
			});
		});
		/**
		 * 숫자만 입력받도록 설정합니다.
		 */
		function setOnlyNum(){
			var numberInput = document.getElementById('numberInput');
			numberInput.value = '';
			
			eventCtrl.add(numberInput, 'keydown', eventCtrl.keyEvents.onlyNumber);
			numberInput.focus();
		}
		/**
		 * 숫자만 입력받는 설정을 해제합니다.
		 */
		function resetOnlyNum() {
			var numberInput = document.getElementById('numberInput');
			numberInput.value = '';
			
			eventCtrl.remove(numberInput, 'keydown', eventCtrl.keyEvents.onlyNumber);
			numberInput.focus();
		}
	</script>
</head>
<body>
	<h1>이벤트 핸들링</h1>
	<button type="button" onclick="setOnlyNum();">숫자만 입력 받기 설정</button>
	<button type="button" onclick="resetOnlyNum();">숫자만 입력 받기 해제</button>
	<br />
	<input type="text" name="number" id="numberInput" /><br />
	입력받은 keycode: <span id="insertedKeyCode"></span>
</body>
</html>
